<!--  -->
<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>新闻管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加新闻</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区 -->
    <el-card>
      <el-alert
        title="添加新闻信息"
        type="info"
        center
        show-icon
        :closable="false"
        class="alert">
      </el-alert>
      <!-- 添加新闻列表区 -->
      <el-form
        :model="newsInfo"
        ref="editFormRef"
        label-width="100px"
        :rules="newsRules"
        class="demo-ruleForm "
      >
        <el-form-item label="新闻图片" prop="header">
          <OssUpload v-model="newsInfo.header"></OssUpload>
        </el-form-item>
        <el-form-item label="新闻类型" prop="newsType">
          <el-select v-model="newsInfo.newsType" placeholder="请选择" >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="新闻标题" prop="newsTitle">
          <el-input v-model="newsInfo.newsTitle"></el-input>
        </el-form-item>
        <el-form-item label="新闻内容" prop="newsContent">
          <textarea v-model="newsInfo.newsContent" class="newsContent"></textarea>
        </el-form-item>
        <el-form-item label="发布状态" prop="state">
          <el-radio-group v-model="newsInfo.state" >
            <el-radio label="0" border>未发布</el-radio>
            <el-radio label="1" border>直接发布</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="addNewsInfo">确定添加</el-button>
    </el-card>
    
  </div>
</template>

<script>
import OssUpload from '../../components/OssUpload.vue'
export default {
  name:'AddNews',
  data () {
    return {
      // 新闻信息
      newsInfo:{
        header: '',
        newsType:'',
        newsTitle:'',
        newsContent:"",
        state:1,
      },
       options: [{
          value: '1',
          label: '小宠饲养'
        }, {
          value: '2',
          label: '小宠训练'
        } ,{
          value: '3',
          label: '小宠医疗'
        }],
        newsRules:
         { newsTitle:{ required: true, message: '请输入新闻标题名称', trigger: 'blur' },
         newsContent:{ required: true, message: '请输入新闻内容', trigger: 'blur' },
        },
    };
  },
   components:{
   OssUpload 
  },
  methods:{
    // 添加信息
    async addNewsInfo(){
      console.log(this.newsInfo)
      const {data:res} = await this.$http.post('/dqxmall/news/save',{
        newsImages : this.newsInfo.header,
        newsTitle :this.newsInfo.newsTitle,
        newsText :this.newsInfo.newsContent,
        newsStatus :this.newsInfo.state,
        type : this.newsInfo.newsType,
        likeCount : 0  })
        if(res.code !==0) {return this.$message.error("新闻添加失败")}
        this.$message.success("新闻添加成功")
        this.newsInfo = {}
        this.$router.push("/news")
    },
  }

}

</script>
<style lang='less' scoped>

.alert{
  margin-bottom: 20px;
}
.newsContent{
  width: 800px;
}
</style>